<template>
  <div
    class="form-action"
    :class="classes"
  >
    <div class="form-action__content">
      <slot />
    </div>
    <div class="form-action__place" />
  </div>
</template>

<script>
export default {
  name: 'FormAction',
  props: {
    fixed: {
      type: Boolean,
      default: false
    },
    align: {
      type: String,
      default: ''
    }
  },
  computed: {
    classes() {
      var classes = []
      if (this.fixed) {
        classes.push('form-action__fixed')
      }
      if (this.align) {
        classes.push(`form-action--${this.align}`)
      }
      return classes
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/variables.scss';
.form-action {
  &__content {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    z-index: 2000;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    padding: 20px 15px;
    border-top: 1px solid #ececec;
    background: #f9fbff;
    .el-form-item {
      margin-bottom: 0;
      .el-form-item__content {
        &::after,
        &::before {
          display: none;
        }
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
  &__place {
    width: 100%;
    height: 100px;
  }
  &__fixed {
    .form-action__content {
      position: fixed;
      transition: width 0.28s;
      width: calc(100% - #{$sideBarWidth});
    }
  }
  &--center &__content {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.hideSidebar {
  .form-action__fixed {
    .form-action__content {
      width: calc(100% - #{$sideBarCollapseWidth});
    }
  }
}

// transition-duration: 0.3s;
// transform: translate3d(-$sideBarWidth, 0, 0);
.el-drawer .el-scrollbar {
  .form-action {
    &__fixed {
      .form-action__content {
        position: absolute;
      }
    }
  }
}
</style>
